<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>controlrenderer.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">controlrenderer.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_ui_controlrenderer.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/ui/controlrenderer.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/ui/controlrenderer.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_ControlRenderer.html">
          goog.ui.ControlRenderer</a><br/>
        <div class="class-details">Default renderer for <code> goog.ui.Control</code>s.  Can be used as-is, but
subclasses of Control will probably want to use renderers specifically
tailored for them by extending this class.  Controls that use renderers
delegate one or more of the following API methods to the renderer:
<ul><li><code> createDom</code> - renders the DOM for the component
   <li><code> canDecorate</code> - determines whether an element can be decorated
       by the component
   <li><code> decorate</code> - decorates an existing element with the component
   <li><code> setState</code> - updates the appearance of the component based on
       its state
   <li><code> getContent</code> - returns the component's content
   <li><code> setContent</code> - sets the component's content
</li></li></li></li></li></li></ul>
Controls are stateful; renderers, on the other hand, should be stateless and
reusable.
</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ControlRenderer.getAriaStateForAriaRole_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ControlRenderer.</span><span class="entryName">getAriaStateForAriaRole_<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">attr</span>)</span>
        </span>
        &#8658; <span class="type">goog.a11y.aria.State</span>
      </div>


     <div class="entryOverview">
       Returns the appropriate ARIA attribute based on ARIA role if the ARIA
attribute is an ARIA state.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span>!</span><span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The element from which to get the ARIA role for
matching ARIA state.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">attr</span>
        : <span class="type">goog.a11y.aria.State</span>
        <div class="entryOverview">The ARIA attribute to check to see if it
can be applied to the given ARIA role.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type">goog.a11y.aria.State</span>&nbsp;
            An ARIA attribute that can be applied to the
given ARIA role.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_controlrenderer.js.source.html#line601">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ControlRenderer.getCustomRenderer&renderer.getCssClass"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ControlRenderer.getCustomRenderer&renderer.</span><span class="entryName">getCssClass<span class="args">()</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
      </div>


     <div class="entryOverview">
       Returns the CSS class to be applied to the root element of components
rendered using this renderer.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&nbsp;
            Renderer-specific CSS class.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_controlrenderer.js.source.html#line111">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ControlRenderer.getCustomRenderer"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ControlRenderer.</span><span class="entryName">getCustomRenderer<span class="args">(<span class="arg">ctor</span>,&nbsp;<span class="arg">cssClassName</span>)</span>
        </span>
        &#8658; <span class="type"><a href="class_goog_ui_ControlRenderer.html">goog.ui.ControlRenderer</a></span>
      </div>


     <div class="entryOverview">
       Constructs a new renderer and sets the CSS class that the renderer will use
as the base CSS class to apply to all elements rendered by that renderer.
An example to use this function using a color palette:

<pre class="lang-js prettyprint">
var myCustomRenderer = goog.ui.ControlRenderer.getCustomRenderer(
    goog.ui.PaletteRenderer, 'my-special-palette');
var newColorPalette = new goog.ui.ColorPalette(
    colors, myCustomRenderer, opt_domHelper);
</pre>

Your CSS can look like this now:
<pre class="lang-js prettyprint">
.my-special-palette { }
.my-special-palette-table { }
.my-special-palette-cell { }
etc.
</pre><em>instead</em> of
<pre class="lang-js prettyprint">
.CSS_MY_SPECIAL_PALETTE .goog-palette { }
.CSS_MY_SPECIAL_PALETTE .goog-palette-table { }
.CSS_MY_SPECIAL_PALETTE .goog-palette-cell { }
etc.
</pre>

You would want to use this functionality when you want an instance of a
component to have specific styles different than the other components of the
same type in your application.  This avoids using descendant selectors to
apply the specific styles to this component.


     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">ctor</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a></span>
        <div class="entryOverview">The constructor of the renderer you are trying to
    create.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">cssClassName</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">The name of the CSS class for this renderer.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="class_goog_ui_ControlRenderer.html">goog.ui.ControlRenderer</a></span>&nbsp;
            An instance of the desired renderer with
    its getCssClass() method overridden to return the supplied custom CSS
    class name.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_controlrenderer.js.source.html#line103">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ControlRenderer.getInstance"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ControlRenderer.</span><span class="entryName">getInstance<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_controlrenderer.js.source.html#line58">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ControlRenderer.isAriaState_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.ControlRenderer.</span><span class="entryName">isAriaState_<span class="args">(<span class="arg">attr</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Determines if the given ARIA attribute is an ARIA property or ARIA state.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">attr</span>
        : <span class="type">goog.a11y.aria.State</span>
        <div class="entryOverview">The ARIA attribute to classify.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            If the ARIA attribute is an ARIA state.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_controlrenderer.js.source.html#line618">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/ui/controlrenderer.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
